<template>
    <div class="tr">
    <div style="flex-grow: 1;">
        <img alt="Vue logo" v-if="langZh" src="../assets/logo_zh.png"/>
        <img alt="Vue logo" v-else src="../assets/logo_en.png"/>
    </div>

    <el-dropdown style="flex-basis: 200px;">
        <span class="el-dropdown-link">
        <el-icon class="el-icon--right">
            <UserFilled />
        </el-icon>
        <span>{{ niceName }}</span>
        </span>
        <template #dropdown>
        <el-dropdown-menu>
            <el-dropdown-item>{{ $t('login.modifyPassword') }}</el-dropdown-item>
            <el-dropdown-item>{{ $t('login.personInfo') }}</el-dropdown-item>
            <el-dropdown-item @click="logout">{{ $t('login.logout') }}</el-dropdown-item>
        </el-dropdown-menu>
        </template>
    </el-dropdown>  
    </div>
</template>
<script>
import {UserFilled} from '@element-plus/icons-vue'
    export default {
    name: '',
    components:{
       UserFilled
    },
    data: function(){
    return {
        langZh :true,
        niceName:"" ,
    }
    },
    methods:{
        logout:function(){
            window.sessionStorage.removeItem('userName');
            sessionStorage.clear()
            this.$router.push({
                name:"login"
            })
        },
    mounted:function(){
        var lang = localStorage.getItem('lang');
        if(lang == 'en'){
            this.langZh = false;
        }else{
            this.langZh = true;
        }
        this.niceName = window.sessionStorage.getItem("niceName")
    }
    }
    }
   </script>
   <style scoped>
       .container{
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           width: 100%;
           height: 100%;
           background-color: aliceblue;
       }
       .tr{
           width: 100%;
           /* flex-basis: 50px; */
           display: flex;
           flex-direction: row;
           justify-content: space-between;
           /* background-color: beige; */
           align-items: center;
       }
       .second{
           background-color: aqua;
       }
   </style>